import React, { Component } from "react";
// import { createPortal } from "react-dom";
import withPortal from "./withPortal";
import { bool, func } from "prop-types";

import "./modal.css";

class Modal extends Component {
  render() {
    // console.log(this.props.visible);
    return (
      <>
        {this.props.visible && (
          <div className="shadow">
            <div className="center">
              <h2>Basic Modal</h2>
              {this.props.children}
              <footer>
                <button onClick={this.props.onCancel}>取消</button>
                <button onClick={this.props.onOk}>确定</button>
              </footer>
            </div>
          </div>
        )}
      </>
    );
  }
}

Modal.defaultProps = {
  visible: false,
};

Modal.propTypes = {
  visible: bool,
  onOk: func,
  onCancel: func,
};

export default withPortal(Modal);
